<template>
  <div class="page">
    <breadcrumb>备选库</breadcrumb>
    <div class="content scroll-wrap alternative-tabs">
      <tabs :data="['大学优先', '专业优先']" :value="tabsActive" @event="bindTabs"></tabs>
      <div>
        <nuxt-child />
      </div>
    </div>

    <div class="help">
      <div class="help-main">
        <dl v-if="list">
          <dt>填报帮助</dt>
          <!-- <dd v-html="list"></dd> -->
          <dd style="white-space: pre-line;">{{list}}</dd>
          <!-- <dd v-for="(item, index) in list" :key="index">{{item}}</dd> -->
        </dl>
        <p>报名截止时间：</p>
        <p>{{time}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { api } from '@/utils'
export default {
  layout: 'zhiyuan-select',
  data () {
    return {
      tabsActive: 0,
      list: '',
      time: ''
    }
  },
  created () {
    let _path = this.$nuxt.$route.name
    this.tabsActive = _path === 'zhiyuan-alternative' ? 0 : 1

    this.help()
  },
  methods: {
    bindTabs (active) {
      let _path = ['/zhiyuan/alternative', '/zhiyuan/alternative/major']
      this.$router.push({
        path: _path[active]
      })
    },
    help () {
      this.$axios.get(api.getWishHelp).then(data => {
        this.list = data.description
        // this.list = data.description.split(';')
        if (data.time) {
          this.time = this.format(parseInt(data.time))
          // this.time = new Date(parseInt(data.time)).toLocaleString().replace(/:\d{1,2}$/, ' ')
        }
      }).catch(data => {
        this.$message.error('网络走丢了，请稍后重试！')
      })
    },
    add0 (m) { return m < 10 ? '0' + m : m },
    format (shijianchuo) {
      var time = new Date(shijianchuo)
      var y = time.getFullYear()
      var m = time.getMonth() + 1
      var d = time.getDate()
      return y + '-' + this.add0(m) + '-' + this.add0(d)
    }
  }
}
</script>

<style scoped lang="scss">
.top-select{
  padding:25px 0 20px;
  border-bottom:1px solid $line;
}
/deep/ .el-tabs__nav-scroll{
  padding:0 10px !important;
}

.block-btn--blue{
  margin-right:20px;
}

.page {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .content {
    padding: 0;
    flex: 1;
    // overflow: hidden;
    // overflow-y: auto;
  }
  // 右侧填报帮助
  .help{
    padding:40px 10px 0 50px;
    &-main{
      width: 182px;
      border-radius: 10px;
      padding:15px 15px 25px 25px;
      @extend .bg-f7;
      dl{
        dt{
          @extend .c-ad;
          text-align:center;
          font-size:16px;
          margin-bottom:15px;
        }
        dd{
          position:relative;
          color:#494949;
          font-size:14px;
          line-height:1.6;
          margin-bottom:25px;
          // &:after{
          //   content:"●";
          //   color:$table-r;
          //   position: absolute;
          //   left:-15px; top:0px;
          // }
        }
      }
      p{
        font-size:14px;
        color:$table-r;
        margin-bottom:10px;
      }
    }
  }
}
</style>
